<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
	  <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
	  <link rel="stylesheet" href="jquery.mobile-1.0b2.css" type="text/css" media="screen" title="no title" charset="utf-8">
	  
	  <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
	  <script type="text/javascript" charset="utf-8" src="jquery-1.6.1.min.js"></script>
	  <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0b2.js"></script>
	  
	  <script type="text/javascript" charset="utf-8" src="main.js"></script>  
  </head>
  <body onload="init();" id="stage" class="theme">
  
	<!-- menu -->
	<div data-role="page" id="home">
	
		<div data-role="header">
			<h1>PhoneGap jQuery mobile</h1>
		</div><!-- /header -->
	
		<div data-role="content">	
			<div>
				<p></p>
			</div>
					
			<ul data-role="listview" data-theme="g" data-inset="true">
				<li data-role="list-divider">Menu</li>
				<li><a id="loadContacts" href="#contacts">Contacts</a></li>
				<li><a id="filesTest" href="#files">File test</a></li>
				<li><a href="#deviceInfo">Device info</a></li>
				<li data-icon="false"><a href="#" id="alert">Alert</a></li>
			</ul>

		</div><!-- /content -->
	
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" class="ui-btn-active">Home</a></li>
					<li><a href="#deviceInfo">Info</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->
	</div><!-- /page -->

	<!-- device info -->
	<div data-role="page" id="deviceInfo">
	
		<div data-role="header">
			<a href="#" data-rel="back">back</a>
			<h1>Device Info</h1>
		</div><!-- /header -->
	
		<div data-role="content">	
			<div id="platform"></div>
    		<div id="version"></div>			
		</div><!-- /content -->
	
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-transition="slideup">Home</a></li>
					<li><a href="#deviceInfo" class="ui-btn-active">Info</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->
	</div><!-- /page --> 
	
	<!-- contacts -->
	<div data-role="page" id="contacts">
	
		<div data-role="header">
			<a href="#" data-rel="back">back</a>
			<h1>Contacts</h1>
		</div><!-- /header -->
	
		<div data-role="content">	
			<ul data-role="listview" class="ui-listview" id="contactsList">
			</ul>					
		</div><!-- /content -->
	
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" class="ui-btn-active">Home</a></li>
					<li><a href="#deviceInfo">Info</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->
	</div><!-- /page -->

	<!-- files -->
	<div data-role="page" id="files">
	
		<div data-role="header">
			<a href="#" data-rel="back">back</a>
			<h1>Files</h1>
		</div><!-- /header -->
	
		<div data-role="content">	
			<ol data-role="listview" class="ui-listview" id="fileTest">
			</ol>
		</div><!-- /content -->
	
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" class="ui-btn-active">Home</a></li>
					<li><a href="#deviceInfo">Info</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->
	</div><!-- /page -->
	   
  </body>
</html>
